<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>AngularJS的模块</title>
		<style>
			body {
				font-family: 'microsoft yahei', Arial, sans-serif;
			}
			
			h1 {
				font-weight: 500;
				font-size: 24px;
			}
			
			table,
			th,
			td {
				border: 1px solid grey;
				border-collapse: collapse;
				padding: 10px;
			}
			
			table tr:nth-child(odd) {
				background-color: #E4E4E4;
			}
			
			table tr:nth-child(even) {
				background-color: #ffffff;
			}
		</style>
	</head>

	<body>
		<h2>AngularJS模块演示</h2>

		<!-- 此处定义了模块：mainApp -->
		<div ng-app="mainApp" ng-controller="studentController">
			<table>
				<tr>
					<td>姓:</td>
					<td><input type="text" ng-model="student.lastName"></td>
				</tr>
				<tr>
					<td>名:</td>
					<td><input type="text" ng-model="student.firstName"></td>
				</tr>
				<tr>
					<td>全名: </td>
					<td>{{student.fullName()}}</td>
				</tr>
				<tr>
					<th>课程</th>
					<th>分数</th>
				</tr>
				<tr ng-repeat="subject in student.subjects">
					<td>{{ subject.name }}</td>
					<td>{{ subject.marks }}</td>
				</tr>
			</table>
		</div>

		<script src="http://cdn.gbtags.com/angular.js/1.2.20/angular.min.js"></script>
		<script src="js/mainApp.js"></script>
		<!-- 
<script src="studentController.js"></script>
-->
	</body>

</html>